<template>
  <DraggablePopup target="home" title="图层编辑" v-on:close="onClosePopupListener">
    <div class="layer-edit">
      <div class="layer-edit-control">
        <el-form>
          <el-form-item label="选择图层:">
            <el-select
              v-model="selectedLayer"
              placeholder="请选择图层"
              size="small"
              v-on:change="onLayerChangeListener"
            >
              <el-option value="spoil" label="弃渣场"></el-option>
              <el-option value="fetch" label="取土场"></el-option>
              <el-option value="mixing" label="拌合站"></el-option>
              <el-option value="beam" label="制（存）梁场"></el-option>
              <el-option value="sleeper" label="轨枕预制场"></el-option>
              <el-option value="track" label="铺轨（架）基地"></el-option>
              <el-option value="steel" label="钢梁预拼存放场"></el-option>
              <el-option value="transfer" label="中转料场"></el-option>
              <el-option value="temporary" label="临时材料厂"></el-option>
              <el-option value="camp" label="施工营地（生活区）"></el-option>
              <el-option value="other" label="其他"></el-option>
            </el-select>
            <el-button
              class="layer-edit-control-add"
              v-if="selectedLayer"
              size="small"
              v-on:click="isDrawing = !isDrawing"
            >{{ isDrawing ? "取消新增" : "新增" }}</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="layer-edit-content">
        <el-table
          class="layer-edit-content-table"
          :data="tableData"
          v-on:row-click="onTableRowClick"
          height="300"
          border
          size="mini"
        >
          <el-table-column type="index" label="序号" width="58"></el-table-column>
          <el-table-column prop="name" label="名称" width="180"></el-table-column>
          <el-table-column prop="sectionName" label="标段" width="150"></el-table-column>
        </el-table>
        <el-pagination
          class="layer-edit-content-page"
          :current-page.sync="tablePage.page"
          :page-size="tablePage.pageSize"
          :pager-count="5"
          layout="total, prev, pager, next"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </DraggablePopup>
</template>

<script>
import { Modify, Snap, Draw } from "ol/interaction";

import DraggablePopup from "@/components/DraggablePopup.vue";

import { mapData, mapMethods } from "@/stores/map-store";

export default {
  name: "layer-edit-popup",
  components: {
    DraggablePopup
  },
  data() {
    return {
      selectedLayer: null,
      layerName: "",
      layerObj: null,
      vectorSource: null,
      lastModify: null,
      lastSnap: null,
      isDrawing: false,
      lastDraw: null,
      lastLayerVisible: false,
      store: {
        mapData,
        mapMethods
      },
      tablePage: {
        page: 1,
        pageSize: 10
      }
    };
  },
  computed: {
    tableData() {
      const _this = this;
      if (_this.layerObj && _this.layerObj.features) {
        console.log(_this.layerObj.features);
        let features = _this.layerObj.features;
        let start = _this.tablePage.pageSize * (_this.tablePage.page - 1);
        let end = start + _this.tablePage.pageSize;
        let curPageFeatures = features.slice(start, end);
        let arr = curPageFeatures.map((feature, index) => {
          return {
            originIndex: start + index,
            feature,
            name: feature.get("name"),
            sectionName: feature.get("section_name")
          };
        });
        return arr;
      }
      return [];
    },
    total() {
      const _this = this;
      if (_this.layerObj && _this.layerObj.features) {
        return _this.layerObj.features.length;
      }
      return 0;
    }
  },
  mounted() {
    const _this = this;
    _this.$overlay.closeAll();
    _this.store.mapData.mapStatus = "modify";
  },
  watch: {
    isDrawing(isDrawing) {
      const _this = this;
      if (isDrawing) {
        _this.store.mapData.map.addInteraction(_this.lastDraw);
      } else {
        _this.store.mapData.map.removeInteraction(_this.lastDraw);
      }
    }
  },
  methods: {
    onClosePopupListener() {
      const _this = this;
      _this.$emit("close");
    },
    onLayerChangeListener(layerName) {
      const _this = this;
      _this.$overlay.closeAll();
      _this.removeInteraction();
      _this.layerName = layerName;
      _this.layerObj = _this.store.mapData.layers.temporaryProject[layerName];
      _this.vectorSource = _this.layerObj.layer.getSource();
      _this.tablePage.page = 1;
      _this.tablePage.total = _this.layerObj.features.length;
      _this.lastModify = new Modify({ source: _this.vectorSource });
      _this.lastSnap = new Snap({ source: _this.vectorSource });
      _this.lastDraw = new Draw({
        type: "Point",
        stopClick: true,
        source: _this.vectorSource,
        style: _this.layerObj.style
      });
      _this.lastDraw.on("drawend", ({ feature }) => {
        _this.isDrawing = false;
        this.$set(feature.values_, "type", _this.layerName);
        this.$set(feature.values_, "name", "未命名");
        this.$set(feature.values_, "section_name", null);
        _this.layerObj.features.unshift(feature);
        console.log(feature === _this.layerObj.features[0]);
        _this.$overlay.show({
          map: _this.store.mapData.map,
          feature: feature,
          editing: true
        });
      });
      _this.addInteraction();
    },
    addInteraction() {
      const _this = this;
      _this.store.mapData.map.addInteraction(_this.lastModify);
      _this.store.mapData.map.addInteraction(_this.lastSnap);
      _this.layerObj.layer.setVisible(true);
      _this.layerObj.layer.set("editing", true);
    },
    removeInteraction() {
      const _this = this;
      if (_this.lastModify) {
        _this.store.mapData.map.removeInteraction(_this.lastModify);
      }
      if (_this.lastSnap) {
        _this.store.mapData.map.removeInteraction(_this.lastSnap);
      }
      if (_this.lastDraw) {
        _this.store.mapData.map.removeInteraction(_this.lastDraw);
        _this.isDrawing = false;
      }
      if (_this.layerObj) {
        _this.layerObj.layer.setVisible(_this.layerObj.visible);
        _this.layerObj.layer.unset("editing");
      }
    },
    onTableRowClick({ feature }) {
      const _this = this;
      _this.$overlay.show({
        map: _this.store.mapData.map,
        feature: feature,
        fit: true,
        editing: true
      });
    },
    deleteFeature({ originIndex, feature }) {
      const _this = this;
      _this.vectorSource.removeFeature(feature);
      _this.layerObj.features.splice(originIndex, 1);
    }
  },
  destroyed() {
    const _this = this;
    _this.$overlay.closeAll();
    _this.removeInteraction();
    _this.store.mapData.mapStatus = "normal";
    _this.store.mapData.map.dispatchEvent({ type: "refreshEditableLayers" });
  }
};
</script>

<style scoped>
.draggable-popup {
  position: absolute;
  top: 160px;
  right: 60px;
}

.layer-edit {
  width: 390px;
  background-color: white;
}

.layer-edit-control {
  padding: 5px 20px;
}

.el-form-item {
  margin-bottom: 0;
  text-align: left;
}

.el-select {
  width: 180px;
}

.layer-edit-control-add {
  margin-left: 10px;
}

.layer-edit-content {
  width: 100%;
}

.layer-edit-content-table {
  width: 100%;
}

.layer-edit-content-table-delete {
  font-size: 16px;
}

.layer-edit-content-page {
  text-align: right;
  overflow: hidden;
}
</style>